<template>
  <section class="todoapp">
	<header class="header">
		<h1>todos</h1>
		<input class="new-todo" placeholder="What needs to be done?" v-model="todoName" autofocus @keyup.enter="add">
	</header>

	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<li :class="{completed: item.flag}" v-for="item in list" :key="item.id">
				<div class="view">
					<input class="toggle" type="checkbox" v-model="item.flag">
					<label>{{item.name}}</label>
					<button class="destroy" @click="del(item.id)"></button>
				</div>
				<input class="edit" value="Create a TodoMVC template">
			</li>
		</ul>
	</section>

	<footer class="footer" v-show="isShowFooter">
		<span class="todo-count"><strong>{{leftCounts}}</strong> item left</span>
		<ul class="filters">
			<li>
				<a class="selected" href="#/">All</a>
			</li>
			<li>
				<a href="#/active">Active</a>
			</li>
			<li>
				<a href="#/completed">Completed</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="isShowClear" @click="clear">Clear completed</button>
	</footer>
</section>
</template>

<script>
import { reactive, toRefs, computed, watch } from 'vue'
export default {
  setup() {
    const state = reactive({
      // 做一个兼容防止localstore里面没有数据
      list: JSON.parse(localStorage.getItem('todoList')) || [],
      todoName: ''
    })
    // 删除功能
    const del = (id) => {
      // splice   filter方法
       state.list = state.list.filter((item) => item.id !== id)
    }

    // 添加功能
    const add = () => {
      if (state.todoName === '') {
        return
      }
      state.list.unshift({
        id: +new Date(),
        name: state.todoName,
        flag: false
      })
      state.todoName = ''
    }

    // 底部计算属性
    // 找出还没完成的li的length
    const leftCounts = computed(() => {
      return state.list.filter(item => !item.flag ).length
    })
    // 有任意一项完成了就返回true
    const isShowClear = computed(() => {
      // return item.flag ==== true   可简写成 return item.flag
      return state.list.some(item => item.flag)
    })
    const isShowFooter = computed(() => {
      return  state.list.length
    })
    // 保留住未完成的
    const clear = () => {
      state.list = state.list.filter(item => !item.flag)
    }

    // 全选功能
    // 下面的li的 chekbox全部选中  全选才选中   list里的每一项的flag都为true
    // every  判断条件 一假即假
    const isAll = computed({
      get () {
        return state.list.every(item => item.flag)
      },
      set (val) {
        // 获取到全选的状态  赋值给list里每一项的flag   forEach   map
        console.log(val)
        state.list.forEach(item => {
          item.flag = val
        })
      }
    })

    // 利用watch监听state.list缓存到本地   只要list变化就缓存一下
    watch(() => state.list,(newVal) => {
      localStorage.setItem('todoList',JSON.stringify(newVal))
    }, {
      deep: true
    })

    return {
      ...toRefs(state),
      leftCounts,
      isShowClear,
      isShowFooter,
      isAll,
      del,
      add,
      clear
    }
  }
}
</script>

<style>

</style>
